<template>
  <div class="home">
    sub2
    <div class="formDiv">
      <a-form
        :model="formState"
        name="basic"
        autocomplete="off"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 16 }"
        @finish="onFinish"
        @finishFailed="onFinishFailed"
      >
        <a-form-item
          label="Username"
          name="username"
          :rules="[{ required: true, message: 'Please input your username!' }]"
        >
          <a-input v-model:value="formState.username" />
        </a-form-item>

        <a-form-item
          label="Password"
          name="password"
          :rules="[{ required: true, message: 'Please input your password!' }]"
        >
          <a-input-password v-model:value="formState.password" />
        </a-form-item>

        <a-form-item name="remember" :wrapper-col="{ offset: 8, span: 16 }">
          <a-checkbox v-model:checked="formState.remember"
            >Remember me</a-checkbox
          >
        </a-form-item>

        <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
          <a-button type="primary" html-type="submit" @click="SubmitAnt"
            >Submit</a-button
          >
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { defineComponent } from "vue";
import HelloWorld from "@/components/HelloWorld.vue"; // @ is an alias to /src
import { message } from "ant-design-vue";
import { reactive } from "vue";
import { useRouter } from "vue-router";
interface FormState {
  username: string;
  password: string;
  remember: boolean;
}

// let skt = reactive Array:any([])
const formState = reactive<FormState>({
  username: "",
  password: "",
  remember: true,
});
const onFinish = (values: any) => {
  console.log("Success:", values);
};

const onFinishFailed = (errorInfo: any) => {
  console.log("Failed:", errorInfo);
};

let $router = useRouter();
let SubmitAnt = () => {
  console.log(formState.username);
  console.log(formState.password);
  if (formState.username == formState.password) {
    message.success("Login succeeded");
    $router.push("/home");
  }
};
</script>
<style scoped >
.formDiv {
  /* width: 400px; */
  background: pink;
  height: 320px;
  padding: 50px;
  border-radius: 6px;
  box-shadow: 4px 5px 4px #6b6b6b;
}
.home {
  display: flex;
  width: 100%;
  height: 100vh;
  background-color: #a289d3;
  justify-content: center;
  align-items: center;
  align-content: center;
}
</style>
